AI Page Assistant

The AI Page Assistant uses natural language descriptions to automatically generate industrial monitoring pages and dashboards with professional layouts and complete elements. The generated pages support fine-tuning and optimization. Its core purpose is to rapidly complete engineering development of monitoring pages.

Feature Description

• Multi-modal Input for Page Construction: Supports describing a page via natural language: "theme (purpose), visual style (optional), and core content (data/elements to be displayed)", or uploading reference images or selecting asset templates. The AI will generate pages referencing the layout and style of the template or image.
• On-Demand Generation with Two Modes:
  • Quick Mode: The AI intelligently fills in missing contextual details, providing a fast page generation experience. Suitable for rapid ideation, concept validation, and prototype exploration.
  • Guided Mode: Based on visual card interactions, the AI intelligently guides users to complete configurations, providing a plan confirmation and adjustment step before generation to ensure the delivered result aligns precisely with business intent. Suitable for engineering delivery scenarios with strict standards and clear requirements.
• Intelligent Local Regeneration: Supports fine-grained adjustments to generated pages. Users can freely select specific areas on the page and use natural language commands to drive the AI to quickly regenerate or optimize the style of local components.
• Seamless Integration with Production Environment: Generated pages cover real-time data display (e.g., current, voltage, production count), equipment status feedback, and basic interactive elements, ready for use in production monitoring scenarios. Engineers only need to make simple adjustments (e.g., component position, color tuning) based on actual engineering requirements.

Core Advantages

1. Leap in Engineering Efficiency

The design cycle for monitoring pages is shortened from traditional "hours" to "minutes", significantly accelerating project delivery.

Efficiency Comparison:

Page Type	Traditional Development	AI Generation	Credit Cost	Efficiency Improvement
Simple monitoring page (10-20 components)	2-3 hours	3-5 minutes	20 credits/time	95% improvement
Standard dashboard (30-50 components)	4-6 hours	5-10 minutes	20 credits/time	96% improvement
Complex large screen (50+ components)	1-2 days	10-20 minutes	30 credits/time	97% improvement

Cost Effectiveness

Calculated based on labor costs, saving 1 hour of development time is far more valuable than the cost of 20 credits. AI generation not only improves efficiency but also significantly reduces project costs.

2. Zero-Barrier Development

OT engineers do not need to master UI design or front-end development skills. They can complete professional page development simply by describing requirements in natural language.

Traditional Approach vs. AI Approach:

Traditional Approach:
Learn UI design → Learn component library → Manually drag and drop layout → Adjust styles → Configure properties
Requires: Design ability + Technical ability + Significant time

AI Approach:
Describe requirements → AI generates → Simple fine-tuning
Requires: Ability to express requirements clearly

3. Consistent Page Style

Supports defining a unified design standard through "style prompts" (e.g., "dark tech style", "card-based layout"). Reusing prompts across multiple pages ensures visual consistency and reduces later adjustment efforts.

Typical Scenarios

Scenario 1: Rapid Validation of Engineering Proposals

Background: During the project bidding phase, an interface prototype needs to be shown to customers, or a new dashboard layout needs to be internally reviewed.

Traditional Approach:

• Designer produces design draft: 1-2 days
• Developer implements prototype: 2-3 days
• Total: 3-5 days

AI Approach:

• Input requirements: "Create an overall production line dashboard, including OEE, production trends, and equipment status list."
• AI generates high-fidelity page: 5 minutes
• Fine-tuning: 10-20 minutes
• Total: within 30 minutes

Value: Facilitates rapid communication and iteration of engineering proposals, improving bid success rates.

Scenario 2: Standardized Construction of Multi-Page Projects

Background: Dozens of similar equipment monitoring pages need to be created for a production workshop.

Steps:

1. Prepare a unified "style prompt":

   Industrial gray style, highlight color is cyan, card-based layout,
   title font 18px, data font 24px bold.

2. When generating the first equipment page, include the style description in the prompt:

   Industrial gray style, highlight color is cyan, card-based layout,
   title font 18px, data font 24px bold.
   Create monitoring page for Injection Molding Machine 1,
   including temperature, pressure, cycle time, production count.

3. When generating other pages, keep the same style prompt, only modifying the equipment number and parameters.

Note:

• The same style prompt must be entered each time to maintain consistency.
• Due to the inherent randomness of AI generation, even with the same prompt, generated pages may have minor differences.
• It is recommended to manually review and fine-tune after generation to ensure overall style consistency.

Results:

• Most pages maintain consistent layout, fonts, and colors.
• 30 pages reduced from 3 weeks down to 2 days.
• Reduced costs for engineering standardization.

Scenario 3: Quick Start for Complex Page Engineering

Background: Functional pages with process calculation and multi-data processing need to be developed.

Strategy:

1. Use AI to generate the page "skeleton":

   Create a recipe management page, including:
   - Left side: recipe list (table)
   - Middle: parameter input area (10 input boxes)
   - Right side: real-time data display area (5 numeric displays)
   - Bottom: save, load, delete buttons

2. AI generates the basic layout and components.

3. Engineers focus on backend logic and functionality implementation.

Value: Reduces time spent on front-end layout, allowing engineers to concentrate on core business logic.

5-Minute Quick Start

Step 1: Open the AI Page Assistant

In the page editor, click the "AI Assistant" button in the top-right corner, or select "AI Generation" when creating a new page.

Step 2: Specify Requirements and Mode

You can choose Quick Mode (AI automatically fills in missing requirements) or Guided Mode (AI asks questions via card interactions to supplement requirements). Enter page requirements in the dialog, or upload a reference image/select an asset template. For example:

Create an injection molding machine monitoring page, dark tech style,
including:
- Real-time temperature curve chart
- Pressure gauge
- Production count display
- Equipment status indicator lights
- Start/stop buttons

Step 3: Wait for the AI to Generate

The AI will analyze the requirements and generate the page within 30–60 seconds, showing progress indicators during generation.

Step 4: Preview and Fine-Tune

• View the generated page effect.
• If adjustments are needed, you can:
  • Select a specific area and ask the AI to modify it via conversation.
  • Or continue talking to the AI for overall optimization.

Step 5: Intelligent Data Binding

Click "Start Intelligent Binding" to let the AI automatically match variables to components. See AI Smart Binding for details.

Prompting Tips (For Quickly Generating High-Quality Pages)

Tip 1: Basic Standard Page Generation Formula

Formula: Theme (page purpose) + Style (optional) + Core content (data/elements to display)

Example 1 – Simple monitoring page:

Create a monitoring page for a robotic welding station,
dark tech style,
including real-time welding current chart, voltage curve, production count display, and equipment status indicator lights.

Example 2 – Production dashboard:

Create an overall production line dashboard,
card-based layout, blue theme,
including an OEE gauge, production trend line chart, equipment status list, and alarm message ticker.

Example 3 – Data analysis page:

Create an energy consumption analysis page,
light and clean style,
including bar chart of daily/monthly/yearly energy consumption, pie chart of equipment energy consumption,
real-time power curve, and energy consumption ranking table.

Tip 2: Large-Screen Custom Page Generation Formula

Formula: Theme + Style + Layout structure (screen zones) + Detailed elements (charts/data per zone)

Example – 1920x1080 large screen:

Design a stamping machine monitoring page for a 1920x1080 screen,
industrial gray style, highlight color is orange;

The page is divided into three columns: left, center, right:
- Left (width 30%): Display OEE with a gauge, below that display equipment status cards.
- Center (width 40%): Display equipment name at the top, real-time pressure curve with a line chart in the middle, display current work order information at the bottom.
- Right (width 30%): Display historical fault records in a table, up to 10 items.

Use Microsoft YaHei for all text, title 18px, data 24px bold.

Tip 3: Use a Reference Style

If you have a preferred page style, you can describe the reference object:

Create a page similar to Tesla factory monitoring style,
minimalist black-and-white color scheme, strong tech feel,
including 3D equipment model display, real-time data flow effects,
and large-number displays for key metrics.

Frequently Asked Questions

Q1: What if the AI-generated page does not meet expectations?

A: You can try:

1. Redescribe the requirements: Use more specific and clearer language.
2. Generate step by step: Generate the basic layout first, then gradually refine.
3. Provide references: Describe similar page styles or reference objects.
4. Manual fine-tuning: Manually adjust based on the AI-generated page.

Q2: How can I maintain a consistent style across multiple pages?

A:

1. When generating the first page, describe the style requirements in detail.
2. Save this "style prompt".
3. When generating subsequent pages, reuse the same prompt.
4. Only modify the specific content part, keeping the style description unchanged.

Q3: Can components generated by the AI be modified?

A: Absolutely. If you are not satisfied with the generated page, you can select a specific area and ask the AI to modify it directly through conversation. Additionally, pages generated by the AI are standard CMS pages, so you can also manually:

• Drag and drop to adjust component positions and sizes.
• Modify component properties (colors, fonts, styles, etc.).
• Add or remove components.
• Modify data bindings.

Q4: Can generated pages be saved as templates?

A: Yes. Generated and optimized pages can be saved as templates for reuse in subsequent projects.

Q5: Does the AI support generating mobile pages?

A: Yes. When describing requirements, specify "mobile" or "phone", and mention the screen size. The AI will generate a page layout adapted for mobile.

Best Practices

1. Start Simple, Then Go Complex

When using the assistant for the first time, start with simple pages to familiarize yourself with the AI's capabilities and style, then attempt more complex pages. This allows you to get started quickly and avoid wasting credits on complex requirements.

2. Build a Prompt Library

Save commonly used and effective prompts to build a team prompt library, improving overall team efficiency.

3. Make Good Use of Iterative Optimization

If the first generation is not satisfactory, continue the conversation with the AI to make adjustments. However, note that each conversation consumes 20/30 credits. It is recommended to:

• Describe the complete requirements as clearly as possible in the first attempt.
• If adjustments are needed, specify all modification points at once:

"Please make the following adjustments:
1. Change the chart on the left to a gauge.
2. Add an alarm message ticker.
3. Change to a dark theme."

• Avoid multiple separate modifications to save credits.

4. Combine with Intelligent Binding

After the page is generated, immediately use AI Smart Binding to complete variable binding, achieving end-to-end rapid development.

5. Test and Validate

Before putting a generated page into production, be sure to validate it in a test environment:

• Check the display effect at different resolutions.
• Verify that data bindings are correct.
• Test that interactive functions work properly.

Next Steps

• AI Variable Assistant – After mastering page generation, next learn about variable creation and point table import to prepare real data sources for page binding.
• AI Table Assistant – After variables are prepared, continue learning about historical archiving, statistical tables, and business data table configuration.
• AI Smart Binding – Once pages and variables are ready, learn how to quickly bind page components to variables.